<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>pdf</title>
    <link rel="stylesheet" href="../css/pdf.css">
</head>
<body>
    <a href="javascript:void(0)" id="downloadBtn">下载</a>
    <div id="container">
        <ul class="box-list">
            <li>头部</li>
            <li class="box">1</li>
            <li class="box">2</li>
            <li class="box">3</li>
            <li class="box">4</li>
            <li class="box">5</li>
            <li class="box">6</li>
            <li class="box">7</li>
            <li class="box">8</li>
            <li class="box">9</li>
            <li class="box">10</li>
            <li class="box">11</li>
            <li class="box">12</li>
            <li class="box">13</li>
            <li class="box">14</li>
            <li class="box">15</li>
            <li class="box">16</li>
            <li class="box">17</li>
            <li>尾部</li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jspdf/dist/jspdf.min.js"></script>
<script type="text/javascript" src="../lib/html2canvas/dist/html2canvas.min.js"></script>
<script type="text/javascript">
    var downloadBtn = document.querySelector('#downloadBtn')
    var target = document.querySelector('#container')
    target.style.background = "#FFFFFF";
    // a4纸的尺寸[595.28, 841.89]
    var PAPERWIDTH = 595.28;
    var PAPERHEIGHT = 841.89;
    downloadBtn.addEventListener('click', function () {
        html2canvas(target).then(function (canvas) {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;

            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / PAPERWIDTH * PAPERHEIGHT;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            var imgWidth = PAPERWIDTH;
            var imgHeight = PAPERWIDTH / contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                    leftHeight -= pageHeight;
                    position -= PAPERHEIGHT;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }

            var fileName = 'demo.'+ (new Date().getTime()) +'.pdf';
            pdf.save(fileName);
        });
    });
</script>
<!--
<script type="text/javascript">
    const downloadBtn = document.querySelector('#downloadBtn')
    downloadBtn.addEventListener('click', function () {
        var pdf = new jsPDF('p', 'mm', 'a4');
        var pdf_content = $('#container');
        pdf_content.css('backgroundColor', '#ffffff');
        var fileName = 'demo.'+ (new Date().getTime()) +'.pdf';
        pdf.addHTML(pdf_content, function () {
            pdf.output('save', fileName);
        });
    });
</script>
-->
</html>